<template>
    <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
        <el-form-item prop="phone" class="user-name">
            <!-- <el-input 
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.phone"
                      auto-complete="off"
                      :placeholder="$t('login.phone')">
            </el-input> -->
            <el-input @keyup.enter.native="handleLogin" auto-complete="off" v-model="loginForm.phone"
                placeholder="请输入手机号码">
            </el-input>
            <img :src="require('@/assets/imgs/login/user.png')" />
        </el-form-item>
        <el-form-item prop="code" class="code-form-item dun-pai">
            <el-input @keyup.enter.native="handleLogin" v-model="loginForm.code" auto-complete="off"
                placeholder="请输入验证码">
            </el-input>
            <div class="code-num">
                <span class="send_code" @click="handleSend(loginForm.phone)" v-show="sendCodeFlag">
                    发送验证码
                </span>
                <span class="send_code1" v-show="!sendCodeFlag">
                    {{ timer }}s重新获取
                </span>
            </div>
            <img :src="require('@/assets/imgs/login/code.png')" />
        </el-form-item>
        <el-form-item>
            <!-- <el-button size="small"
                       type="primary"
                       @click.native.prevent="handleLogin"
                       class="login-submit">{{$t('login.submit')}}
            </el-button> -->
            <el-button @click.native.prevent="handleLogin" class="login-btn" type="primary">登录</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { isvalidatemobile } from "@/util/validate";
import { mapGetters } from "vuex";
import { getValidateCode } from '@/api/user'
export default {
    name: "codelogin",
    data() {
        const validatePhone = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(this.$t(isvalidatemobile(value)[1])));
            } else {
                callback();
            }
        };
        const validateCode = (rule, value, callback) => {
            if (value.length != 6) {
                callback(new Error(this.$t('forgetPass.errorVerCode')));
            } else {
                callback();
            }
        };
        return {
            msgText: "",
            msgTime: "",
            msgKey: false,
            loginForm: {
                phone: "",
                code: ""
            },
            loginRules: {
                phone: [{ required: true, trigger: "change", validator: validatePhone }],
                code: [{ required: true, trigger: "change", validator: validateCode }]
            },
            sendCodeFlag: true,
            timer: 60
        };
    },
    created() {
        this.msgText = this.config.MSGINIT;
        this.msgTime = this.config.MSGTIME;
    },
    mounted() {
    },
    computed: {
        ...mapGetters(["tagWel"]),
        config() {
            return {
                MSGINIT: this.$t("login.msgText"),
                MSGSCUCCESS: this.$t("login.msgSuccess"),
                MSGTIME: 10
            };
        }
    },
    props: [],
    methods: {
        /**
         *  点击发送验证码
         *  发送成功以后，显示60s之后重新发送
         * 
         */
        handleSend(mobile) {
            //判断手机号码是否为空
            if (!mobile) {
                this.$message.error('手机号码不能为空')
                return
            }
            getValidateCode(mobile).then(res => {
                if (res.status == 200) {
                    this.$message.success('操作成功')
                    this.sendCodeFlag = !this.sendCodeFlag
                    const time = setInterval(() => {
                        this.timer--
                        if (this.timer == 0) {
                            clearInterval(time)
                            this.sendCodeFlag = true
                        }
                    }, 1000)
                } else {
                    this.$message.error('操作失败')
                }
            })

            //if (this.msgKey) return;

            // getValidateCode(mobile).then(res => {

            //     console.log('res===',res)
            //     this.$notify({
            //         title:this.$t('deletePrompt.successTitle'),
            //         message:this.$t("forgetPass.hintSentSuccess"),
            //         type: 'success'
            //     });
            //     this.msgText = this.msgTime + this.config.MSGSCUCCESS;
            //     this.msgKey = true;
            //     const time = setInterval(() => {
            //         this.msgTime--;
            //         this.msgText = this.msgTime + this.config.MSGSCUCCESS;
            //         if (this.msgTime == 0) {
            //             this.msgTime = this.config.MSGTIME;
            //             this.msgText = this.config.MSGINIT;
            //             this.msgKey = false;
            //             clearInterval(time);
            //         }
            //     }, 1000);
            // })
        },

        /**
         * @description 手机登入 btn 登入
         *
         * */
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.$store.dispatch("LoginByPhone", this.loginForm).then(res => {
                        const { code } = res;
                        if (code) return;
                        //登录前是否有 登录返回地址
                        let loginBackPath = window.localStorage.getItem('loginBackPath');
                        if (loginBackPath) {
                            this.$router.push({ path: loginBackPath });
                            window.localStorage.setItem('loginBackPath', "");//登录返回地址置空
                        } else {
                            for (let i = 0; i < this.tagWel.length; i++) {
                                this.$router.push({ path: this.tagWel[i].value });
                            }
                        }
                        // this.$router.push({ path: 'wel/index' });
                    });
                }
            });
        }
    }
};
</script>

<style scoped>
.msg-text {
    display: block;
    width: 60px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
}


.el-form-item {
    margin-top: 0;
    margin-bottom: 40px !important;
}

.code-form-item {
    position: relative;
    margin-bottom: 80px !important;
}

@media screen and (max-width: 1440px) {
    .el-form-item {
        margin-bottom: 20px !important;
    }

    .code-form-item {
        margin-bottom: 40px !important;
    }
}

.user-name img,
.code-form-item img {
    position: absolute;
    top: 10px;
    left: 30px;
    width: 26px;
    height: 26px;
}

.code-form-item img {
    width: 24px;
    height: 29px;
}

.code-form-item .code-num {
    position: absolute;
    right: -4px;
    bottom: 9px;
}

.send_code,
.send_code1 {
    padding: 10px 20px;
    font-size: 14px;
    color: #4371E4;
}

.send_code:hover {
    cursor: pointer;
}

.send_code1:hover {
    cursor: not-allowed;
}

.login-btn {
    width: 100%;
    height: 50px;
    font-size: 16px;
    background-color: #4371E4;
    border-color: #4371E4;
    color:#fff;
}
@media screen and (max-width: 1440px) {
    .login-btn {
        margin-bottom: 30px;
    }
}
::v-deep .login-btn:hover {
    opacity: .9;
}
</style>
